<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>上传音乐</title>
    <link rel="stylesheet" href="css/upload.css">
</head>
<body>
<!--enctype="multipart/form-data"-->
<form  enctype="multipart/form-data" id="form1">
    <div class="one">
        <span class="message">文件上传: </span>
        <input type="file" name="filename" id="file" />
    </div>
    <div class="one">
        <span class="message">歌手姓名: </span>
        <label><input type="text" name="singer" placeholder="请输入歌手名" id="singer" /> </label>
    </div>
    <div class="one">
        <span class="message">封面选择: </span>
        <input type="file" id="file2" name="imgname" onchange="upCh(this)"/>
    </div>

    <div class="one">
        <span class="message">图片样式: </span>
        <img id="fileimg" src="" />
    </div>
    <div class="one">
        <input type="button" value="上传" id="submit" onclick="login()"/>
    </div>
</form>

<script src="js/jquery-3.3.1.min.js"></script>
<script>

    function upCh(file) {
        let img = document.getElementById('fileimg');
        let formData = new FormData();
        let imgUrl = file.files[0];
        console.log(imgUrl);
        if (imgUrl) {
            console.log(1);
            formData.append('file',imgUrl);
            img.src = window.URL.createObjectURL(imgUrl);
        }
    }
    function login(){
        // 获取到这里的文件信息
        let filename = $('#file')[0].files[0];
        if (filename == undefined) {
            alert("请选择文件!");
            return;
        }
        // 获取到这里的歌手信息
        let singer = document.querySelector('#singer');
        if (singer.value.trim() == ""){
            alert("请添加歌手!");
            return;
        }
        // 获取到图片信息
        let imgname = $('#file2')[0].files[0];
        if (imgname == undefined) {
            alert("请选择图片!");
            return;
        }
        let isJPG = imgname.type === "image/jpeg";
        if (!isJPG){
            alert("上传图片格式部是jpg的!");
            return;
        }
        // 使用formData来返回
        let formData = new FormData($("#form1")[0]);
        formData.append("filename",filename);
        formData.append("singer",singer.value.trim());
        formData.append("imgname",imgname);
        $.ajax({
            type: "POST",
            url: "music/upload",
            data: formData,
            processData: false,
            contentType: false,
            success: function(data) {
                if(data.status == -1){
                    alert(data.message);
                    location.assign("upload.html");
                }else{
                    alert(data.message);
                    location.assign("index.html");
                }
            },
            error:function() {
                alert("出现异常");
                location.assign("upload.html");
            }
        });
    }
</script>
</body>
</html>